<template>
  <div id="reserveMoneyadd">
    <div class="auditProcess">
      <div class="auditProcessleft">
        <div class="rule_title">
          <span class="title-l"> <i class="icon_left"></i>审核流程 </span>
        </div>
        <div class="block">
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="type" label="节点名称" width="100">
            </el-table-column>
            <el-table-column prop="name" label="审批人" width="160">
              <template slot-scope="scope">
                <div style="display: flex">
                  <div>
                    <el-avatar :src="scope.row.avatar"></el-avatar>
                  </div>
                  <div style="margin: 10px 0px 0px 5px">
                    {{ scope.row.name }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="审批结果"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">
                  <el-tag type="">审批中</el-tag>
                </span>
                <span v-if="scope.row.status == 1">
                  <el-tag type="success">已通过</el-tag>
                </span>
                <span v-if="scope.row.status == 2">
                  <el-tag type="danger">审核驳回</el-tag>
                </span>
                <span v-if="scope.row.status == 3">
                  <el-tag type="danger">转办</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="opinion" label="审批意见">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.opinion }}
                </span>
                <span>
                  <el-upload
                    class="pictureList"
                    action
                    :auto-upload="false"
                    list-type="picture-card"
                    :disabled="true"
                    :on-preview="handlePreview"
                    :file-list="scope.row.opinion_annex"
                  >
                  </el-upload>
                  <el-dialog :visible.sync="dialodata">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="时间">
              <template slot-scope="scope">
                <span v-time="scope.row.time"></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="auditProcessright">
        <div class="rule_title">
          <span class="title-l"> <i class="icon_left"></i>评论 </span>
        </div>
        <div class="comment_content">
          <el-timeline>
            <div v-for="(item, index) in AuditDetails.comment" :key="index">
              <el-timeline-item placement="top">
                <el-card>
                  <div style="display: flex">
                    <el-avatar :src="item.creator.avatar"></el-avatar>
                    <div style="margin: 12px 0px 0px 4px">
                      <span>{{ item.creator.name }}</span>
                    </div>
                    <div style="margin: 12px 0px 0px 4px">
                      <span> {{ item.create_time_name }}</span>
                    </div>
                    <div
                      style="margin: 11px 0px 0px 10px; cursor: pointer"
                      v-if="
                        localgetdata.user_id == 1 ||
                        localgetdata.user_id == AuditDetails.creator.id
                      "
                      @click="deletComment(item)"
                    >
                      <i class="el-icon-delete"></i>
                      <span style="margin: 0px 0px 0px 4px">删除</span>
                    </div>
                  </div>
                  <div style="margin: 10px 0px 10px 5px">
                    <span>评论内容:</span>
                    <el-input
                      style="margin: 5px 0px 0px 0px"
                      v-model="item.content"
                      type="textarea"
                      :row="1"
                      disabled
                    ></el-input>
                  </div>
                  <div
                    style="margin: 10px 0px 10px 5px; display: flex"
                    v-if="item.annex != null"
                  >
                    <div v-if="item.annex.length != 0">
                      <!-- <span>附件:</span> -->
                      <div style="margin: 0px 0px 0px 10px">
                        <div
                          v-for="(itemco, index) in item.annex"
                          style="margin: 0px 0px 5px 3px"
                          :key="index"
                        >
                          <a
                            @click="() => handlePreview(itemco)"
                            style="color: #409eff"
                            >{{ itemco.name }}</a
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </div>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { examine_comment_delete } from "@/api/paymentrequest";
import { reqWebsiteList } from "@/api/customer";

export default {
  name: "reserveMoney",
  props: ["AuditDetails", "fatherMethod"],
  data() {
    return {
      commdialogVisible: false,
      recordex: {
        examine_record_id: "", // 审核记录id
        content: "", // 内容
      },
      position: 0,
      tableData: [],
      spanArr: [],
      dialodata: false,
      dialogImageUrl: "",
      localgetdata: "",
    };
  },
  mounted() {
    this.localgetdata = JSON.parse(localStorage.getItem("user"));
    this.processingData(this.AuditDetails);
  },
  methods: {
    // 删除评论
    deletComment(val) {
      var param = {
        id: val.id,
      };
      examine_comment_delete(param).then((res) => {
        if (res.code == "10000") {
          // console.log("删除数据");
          this.fatherMethod();
        }
      });
    },
    processingData(data) {
      // console.log(data);
      var creator_List = [];
      const creator = { ...data.creator, type: "提交" };
      creator_List.push(creator);
      for (const step of data.step) {
        if (step) {
          creator_List.push(...step.approvers);

          creator_List.push(...step.cpeoples);
        }
      }
      var creator_List_data = creator_List;
      this.processingDataList(creator_List_data);
    },
    processingDataList(data) {
      const updatedData = data.map((item) => {
        if (item.hasOwnProperty("user")) {
          const { user, ...rest } = item;
          return { ...rest, ...user, type: "审批" };
        } else if (!item.hasOwnProperty("type")) {
          return { ...item, type: "抄送" };
        }
        return item;
      });
      this.tableData = updatedData;
      this.rowspan();
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    rowspan() {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.tableData[index].type === this.tableData[index - 1].type) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
      // console.log(this.spanArr, "============");
    },
    handlePreview(file) {
      const regex = /\.(jpg|png)$/i;
      if (regex.test(file.url)) {
        this.$viewerApi({
          images: [file.url],
        });
      } else {
        window.open(file.url);
      }
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .el-card,
.comment_content .is-always-shadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/deep/ .el-upload--picture-card,
/deep/ .el-upload-list__item {
  width: 59px;
  height: 59px;
  line-height: 68px;
}

/deep/ .pictureList .el-upload {
  display: none;
}

/deep/ .el-card .is-always-shadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/deep/ .el-timeline-item__node {
  display: none;
}

/* el-upload附件列表框去除'按 delete 键可删除'提示 */
.el-upload-list__item .el-icon-close-tip {
  display: none !important;
}

.reserveMoneyadd {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;
}

.auditProcess {
  display: flex;
}

.auditProcessleft {
  padding: 20px;
  margin: 0px 10px 10px 10px;
  border-radius: 10px;
  /* margin-top: 5px;
        margin-left: 5px; */
  background-color: #fff;
  width: 65%;
}

.auditProcessright {
  padding: 20px;
  margin: 0px 10px 10px 0px;
  border-radius: 10px;
  background-color: #fff;
  width: 35%;
}

.add-right {
  width: 30px;
  position: relative;
  left: -30px;
  padding: 0;
  height: 28px;
  border-radius: 0 4px 4px 0;
  border-left-width: 0px;
  font-size: 18px;
  font-weight: bold;
  top: 3px;
}

.bottom_add {
  text-align: center;
}

.rule_title {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: bold;
  justify-content: space-between;

  .title-l {
    display: flex;
    align-items: center;
  }

  .icon_left {
    display: inline-block;
    width: 6px;
    height: 16px;
    background: #f1a357;
    margin-right: 6px;
  }
}

.reserveMoneyadd_button {
  display: flex;
  justify-content: center;
}
</style>